<template>
  <el-container>
    <el-header>
      <div class="report_header" ref="headerHeight">
        <div class="report_header_left"></div>
        <div style="display: flex;flex-direction: row;justify-content: flex-end;width: 100%;">
          <el-button style="margin-left: 10px;margin-top: 5px;" size="small" type="primary" @click="addClick"
                     v-permission="['designer.add']">新增</el-button>
        </div>
      </div>
    </el-header>
    <div class="pd10">
      <el-table
        :data="adForm"
        border
        stripe
        v-loadMore="[payLoads,'designer-list']"
        @sort-change="sortChange"
        style="width: 100%">
        <el-table-column
          type="index"
          label="序号"
          width="50"
          align="center"
          fixed
        >
        </el-table-column>
        <el-table-column
          label="页面名称"
          align="center"
          prop="name"
        >
        </el-table-column>
        <el-table-column
          label="页面描述"
          align="center"
          prop="description"
        >
        </el-table-column>
        <el-table-column
          label="页面类型"
          width="80"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag type="success">
              <span>{{scope.row.pageType | watchType}}</span>
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="专题标签"
          align="center"
          prop="tagName"
        >
        </el-table-column>
        <el-table-column
          label="分享广告语"
          align="center"
          prop="shareDescr"
        >
        </el-table-column>
        <el-table-column
          label="分享广告图"
          align="center"
          width="100"
        >
          <template slot-scope="scope" >
            <img style="width: 75px;height: 60px;border-radius: 4px; text-align: center;" v-if="scope.row.shareImage" :src="scope.row.shareImage">
          </template>
        </el-table-column>

        <el-table-column
          label="组件缩略图"
          align="center"
          width="100"
        >
          <template slot-scope="scope" >
            <img style="width: 80px;height: 40px;border-radius: 4px; text-align: center;" v-if="scope.row.thumbnial" :src="scope.row.thumbnial">
          </template>
        </el-table-column>
        <el-table-column
          label="排序"
          align="center"
          width="80"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.orders" @blur="bulrOrders(scope.row)"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          label="功能"
          align="center"
          prop="remark"
          width="80"
          fixed="right"
        >
        <template slot-scope="scope">
          <el-tooltip  class="item" effect="dark" content="设计器" placement="top-start" v-permission="['designer.edit']">
            <a @click="designer(scope.row)">
              <i style="color: #409EFF" class="el-icon-s-tools"></i>
            </a>
          </el-tooltip>
        </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="80">
          <template slot-scope="scope">
            <div>
              <el-tooltip  class="item" effect="dark" content="编辑" placement="top-start" v-permission="['designer.edit']">
                <a @click="editClick(scope.row)">
                  <i style="color: #409EFF" class="el-icon-edit"></i>
                </a>
              </el-tooltip>
              <el-tooltip  class="item" effect="dark" content="删除" placement="top-start" v-show="scope.row.pageType!=0" v-permission="['designer.del']" >
                <a style="margin-left: 10px" @click="deleteAd(scope.row)"  >
                  <i style="color: #F56C6C" class="el-icon-delete"></i>
                </a>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

   <el-footer class="el-footerBox">
     <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                 @pagination="loadWxPage"></pagination>
   </el-footer>
  </el-container>
</template>

<script>
import Pagination from '@/components/Pagination';
  import loadMore from '@/utils/loadMore.js'
  import {mapGetters} from 'vuex'
  import { EventBus } from '@/api/eventBus'
  import permission from '@/directive/permission/index.js' // 权限判断指令
  import {list,del,update} from '../../api/wxPage'
  import { list as tagList} from '../../api/tag'
  export default {
    directives: { permission,loadMore},
    name: 'designer-list',
    data(){
      return{
        adForm:[],
        tags:[],
        tagList:[],
        payLoads:'',
        sorting: {
          id: '',
          orders: ''
        },
          pageSize: 20,
      total: 0,
      pageNum: 1,
      }
    },
    computed: {
      ...mapGetters([
        'mchId'
      ])
    },
    methods:{
      sortChange(column){
        console.log(column)
        this.sortField = column.prop;
        if(column.order == 'ascending'){
          this.direction = 'asc'
        }else {
          this.direction = 'desc'
        }
        this.loadTag()
      },
      bulrOrders(data) {
        console.log(data)
        this.sorting.id = data.id;
        this.sorting.orders = data.orders;
        this.saveSorting();
      },
      saveSorting() {
        var _this = this
        update(_this.sorting).then(response => {
          console.log(response)
          _this.tagList.forEach(function (item) {
            if (item.id == response.data.id) {
              item.orders = response.data.orders
            }
          });
          _this.$message({
            message: response.content,
            offset: 120,
            center: true
          });
        }).catch(error => {
          console.log(error)
        });
      },
      loadTag(){
        let params=new URLSearchParams()
        params.append("type",2)
        tagList(params).then(res=>{
          this.tags=res.data.data
          console.log()
        })
      },
      addClick(){
        this.$router.push({
          path: '/designer/add'
        })
      },
      editClick(row){
        this.$router.push({
          path: '/designer/edit', query: {id: row.id}
        })
      },
      designer(row){
        this.$router.push({
          path: '/designer/index',query: {id: row.id}
        })
      },
      deleteAd(data){
        var _this = this
        this.$confirm('确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          del(data.id).then(response => {
            console.log(response)
            if(response.type)
              _this.adForm.forEach(function(item, index) {
                if (item.id == data.id) {
                  _this.adForm.splice(index, 1)
                }
              })
          }).catch(error => {
            console.log('error!!')
          });
        }).catch(() => {
        });
      },

      loadWxPage(){
        let params=new URLSearchParams()
        params.append('pageNum', this.pageNum)
        params.append('pageSize', this.pageSize)
        list(params).then(response=>{
          this.adForm=response.data.data
          this.total=response.data.total
          this.adForm[response.data.total-1].tagId=''
        })
      }
    },
    activated() {
      this.payLoads = new Date().getTime();
    },
    created() {
      this.loadTag()
      let _this=this
      this.loadWxPage()
      EventBus.$on('designer-add', res => { // 监听新增完毕
        // 更新列表数组
        this.adForm.splice(0, 0, res)
      });
      EventBus.$on('designer-edit', res => { // 监听新增完毕
        // 更新列表数组
        for (var i = 0; i < _this.adForm.length; i++) {
          if (this.adForm[i].id == res.id) {
            console.info("我被执行了")
            this.adForm[i] = res
          }
        }
      })

    },

    components:{
      Pagination

    },
    filters:{
      watchTag(val){

      },
      watchType(val){
        if (val===0){
          return '首页'
        }else if (val===1){
          return '专题'
        }else if (!val){
          return '专题'
        }
      }
    }
  }
</script>

<style scoped>
  .app {
    background-color: rgba(248, 248, 248, 0.8);
  }

  /deep/.el-header {
    padding: 10px;
    /* height: 100% !important; */
    padding-bottom: 0;
  }

  .report_header {
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    background-color: rgba(248, 248, 248, 0.8);
    display: flex;
    align-items: center;
    padding-bottom: 5px;
    position: relative;
    padding-left: 5px;
    padding-right: 5px;
  }
  .report_header_left {
    width: 5px;
    height: 100%;
    background-color: #409EFF;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
  }

  .report_header_query {
    margin-left: 10px;
    width: 180px;
    margin-top: 5px;
  }
</style>
